<template>
	<view id="apps">
		
		
		
		<!-- form -->
		<view class="shop_box">
	
			<view class="head">
				<text class="border">切换账户</text>
				<text>今日收款金额（元）</text>
				<text class="border">店铺升级</text>
			</view>
			
			<view class="big_num">
				<text>99</text>
			</view>
			
			<view class="list">
				<view class="list_item">
					<text>浏览人数</text>
					<text class="num">99</text>
				</view>
				<view class="list_item">
					<text>付款订单数</text>
					<text class="num">99</text>
				</view>
				<view class="list_item">
					<text>付款件数</text>
					<text class="num">99</text>
				</view>
			</view>

		</view>
		
	
	
	
		<!-- icon_list -->
		<view class="icon_list">
			
			<view class="list_item">
				<image src="/static/images/icon_dpxx@2x.png" mode="widthFix"></image>
				<text>店铺信息</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_dpzc@2x.png" mode="widthFix"></image>
				<text>店铺资产</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_gkzs@2x.png" mode="widthFix"></image>
				<text>顾客总数</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_spgl@2x.png" mode="widthFix"></image>
				<text>商品管理</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_ddgl@2x.png" mode="widthFix"></image>
				<text>订单管理</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_xxbd@2x.png" mode="widthFix"></image>
				<text>线下补单</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_xjtj@2x.png" mode="widthFix"></image>
				<text>数据统计</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_dpewm@2x.png" mode="widthFix"></image>
				<text>店铺二维码</text>
			</view>
			<view class="list_item">
				<image src="/static/images/icon_syewm@2x.png" mode="widthFix"></image>
				<text>收银二维码</text>
			</view>
			
		</view>
				
				
				

				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">


	#apps{

		display: flex;
		flex-direction: column;
		
		
		.shop_box{
			background: linear-gradient(180deg, #DE4335 0%, #F88365 100%);
			padding: 32rpx;
			box-sizing: border-box;
			height: 300rpx;
			.head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				box-sizing: border-box;
				color: #fff;
				.border{
					border: 1px #fff solid;
					border-radius: 100px;
					padding: 5rpx 16rpx;
					box-sizing: border-box;
					font-size: 24rpx;
				}
			}
			.big_num{
				display: block;
				text-align: center;
				font-size: 48rpx;
				font-weight: bold;
				color: #fff;
				padding: 30rpx 0;
			}
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				color: #fff;
				text{
					font-size: 24rpx;
					display: block;
					text-align: center;
				}
				.num{
					font-size: 26rpx;
				}
			}
		}
		
		
		// .icon_list
		.icon_list{
			display: grid;
			grid-template-columns: repeat(4,1fr);
			gap: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			.list_item{
				image{
					width: 98rpx;
					height: auto;
					display: block;
					margin: auto;
				}
				text{
					display: block;
					font-size: 24rpx;
					color: #333;
					text-align: center;
					margin-top: 10rpx;
				}
			}
			
		}
		
		
	}
	

</style>
